<template>
    <div class="user-avatar">
        <el-upload
                class="avatar-uploader"
                action=""
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handleCrop">
            <el-avatar v-if="circleUrl" :size="avatarSize.size" :src="circleUrl" alt="用户头像" :key="circleUrl">
                <i class="el-icon-plus avatar-uploader-icon"
                   :style="{width:avatarSize.width,height:avatarSize.height,'line-height':avatarSize.lineHeight,'font-size':avatarSize.fontSize}"/>
            </el-avatar>
            <i v-else class="el-icon-plus avatar-uploader-icon"
               :style="{width:avatarSize.width,height:avatarSize.height,'line-height':avatarSize.lineHeight,'font-size':avatarSize.fontSize}"/>
        </el-upload>
        <!-- 剪裁组件弹窗 -->
        <el-dialog :title="title" :visible.sync="cropperModel" width="800px">
            <cropper ref="cropper" :options="options" @upload="uploadImage">
            </cropper>
        </el-dialog>
    </div>
</template>
<script lang="ts">
  import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
  import {fileUpload} from '@/api/file';
  import Cropper from '@/components/UserAvatar/Cropper.vue';

  @Component({
    components: {
      Cropper
    }
  })
  export default class UserAvatar extends Vue {
    @Prop() private circleUrl!: string;
    @Prop({type: [String, Number], default: 'auto'}) private size!: string | number;
    cropperModel = false; // 剪裁组件弹窗开关
    title = '修改头像';

    get avatarSize() {
      const avatarSize: any = {};
      if (this.size === 'auto') {
        avatarSize.width = '100%';
        avatarSize.height = '100%';
        avatarSize.lineHeight = '100%';
        avatarSize.fontSize = '100%';
        avatarSize.size = 'large';
      } else {
        avatarSize.width = this.size + 'px';
        avatarSize.height = this.size + 'px';
        avatarSize.lineHeight = this.size + 'px';
        if (typeof this.size === 'number') {
          avatarSize.fontSize = (this.size / 6) + 'px';
          avatarSize.size = this.size;
        } else {
          avatarSize.fontSize = '100%';
          avatarSize.size = 'large';
        }
      }
      return avatarSize;
    }


    private options: any = {
      img: '', //裁剪图片的地址
      autoCrop: true, // 是否默认生成截图框
      autoCropWidth: 200, // 默认生成截图框宽度
      autoCropHeight: 200, // 默认生成截图框高度
      fixedBox: true // 固定截图框大小 不允许改变
    };


    handleCrop(file: any, files: any) {
      // 点击弹出剪裁框
      file = file.raw;
      this.options.img = window.URL.createObjectURL(new Blob([file], {type: file.type}));
      this.cropperModel = true;
    }

    uploadImage(data: any) {
      fileUpload(data).then((res: any) => {
        this.cropperModel = false;
        this.handleAvatarSuccess(res);
      }).catch((e) => {
        console.log(e);
      });
    }


    beforeClose(done) {
      this.cropperModel = false;
    }


    @Emit('handleAvatarSuccess')
    handleAvatarSuccess(res: any) {
      return res;
    }
  }
</script>

<style lang="scss">
    .user-avatar {
        .avatar-uploader {

            .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 50%;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .el-upload:hover {
                border-color: #409EFF;
            }

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                text-align: center;
            }
        }
    }

</style>

